<!--
 * @Description: 端口镜像编辑
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-11-05 15:31:31
 * @LastEditTime: 2021-11-08 15:39:04
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="600px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="portForm" :model="form" :rules="rules" label-width="100px" label-position="right">
      <!-- 配置名称 -->
      <el-form-item label="镜像会话" prop="session">
        <el-input-number v-model="form.session" :min="1" :max="64" disabled></el-input-number>
      </el-form-item>
      <!-- 镜像端口 -->
      <el-form-item label="镜像端口" prop="portOid">
        <el-select v-model="form.portOid" style="width:100%;" disabled>
          <el-option
            v-for="(item, index) in portList"
            :key="index"
            :value="item.oid"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="被镜像端口">
        <el-button
          icon="el-icon-plus"
          type="text"
          :disabled="mirroredList.length - oldMirroredList.length === 1 ? true: false"
          @click="add"
        >添加</el-button>
        <el-table border :data="mirroredList" class="ip-table" style="width: 100%" height="300px">
          <!-- 被镜像端口 -->
          <el-table-column label="被镜像端口" align="center" min-width="100" prop="mirroredPortOid">
            <template slot-scope="{$index}">
              <el-select
                v-model="mirroredList[$index].mirroredPortOid"
                :disabled="mirroredList[$index].type === 'add' ? false : true"
                style="width:100%;"
                @change="changePortOided"
              >
                <el-option
                  v-for="(item, index) in portList"
                  :key="index"
                  :value="item.oid"
                  :label="item.name"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- 方向 -->
          <el-table-column label="方向" align="center" width="120" prop="direction">
            <template slot-scope="{$index}">
              <el-select v-model="mirroredList[$index].direction" style="width:100%;">
                <el-option value="RX" label="收镜像"></el-option>
                <el-option value="TX" label="发镜像"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column fixed="right" align="center" label="操作" width="160px">
            <!-- 删除 -->
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: #FA6962"
                icon="el-icon-delete"
                class="table-btn"
                @click="handleDeleteMirror(scope)"
                v-if="scope.row.type !== 'add'"
              >删除</el-button>
              <el-button
                type="text"
                style="color: #409eff"
                icon="el-icon-check"
                class="table-btn"
                @click="onSubmit(scope)"
                v-if="scope.row.type === 'add'"
              >保存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'portInfo', 'portList'],
  data () {
    return {
      dialogTitle: '编辑端口镜像',
      form: {
        id: null,
        session: null,
        portOid: null,
        mirroredPortOid: null,
        direction: null
      },
      rules: {
        session: [{
          required: true,
          message: '请填写镜像会话',
          trigger: 'change'
        }],
        portOid: [{
          required: true,
          message: '请选择接口',
          trigger: 'change'
        }],
        mirroredPortOid: [{
          required: true,
          message: '请选择接口',
          trigger: 'change'
        }],
        direction: [{
          required: true,
          message: '请选择抓包方向',
          trigger: 'change'
        }]
      },
      mirroredPortType: null,
      mirrorPortType: null,
      mirroredList: [],
      oldMirroredList: []
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'edit') {
          _this.dialogTitle = '编辑端口镜像';
          _this.form = {
            id: _this.portInfo.id,
            session: _this.portInfo.session,
            portOid: _this.portInfo.mirrorPortOid,
            mirrorPortType: _this.portInfo.mirrorPortType
          };
          let list = [];
          for (let i = 0; i < _this.portInfo.mirror.length; i++) {
            list.push({
              mirroredPortOid: _this.portInfo.mirror[i].mirroredPortOid,
              direction: _this.portInfo.mirror[i].direction,
              mirroredPortType: _this.portInfo.mirror[i].mirroredPortType
            });
          }
          _this.mirroredList = list;
          _this.oldMirroredList = JSON.parse(JSON.stringify(list));
        }
      }
    },
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$refs['portForm'].resetFields();
      _this.$emit('handleUpdateDialog', false);
      _this.clearData();
    },
    // 清空数据
    clearData () {
      let _this = this;
      _this.form = {
        id: null,
        session: null,
        portOid: null,
        mirroredPortOid: null,
        direction: null
      };
    },
    // 选择被镜像端口
    changePortOided (val) {
      let _this = this;
      let index = _this.portList.findIndex(item => item.oid === val);
      if (index > -1) {
        let name = _this.portList[index].name;
        if (name.indexOf('GEI') > -1) {
          _this.mirroredPortType = 'Interface';
        }
        if (name.indexOf('GRE_TUNNEL') > -1) {
          _this.mirroredPortType = 'GRE';
        }
        for (let i = 0; i < _this.mirroredList.length; i++) {
          if (_this.mirroredList[i].type === 'add') {
            _this.mirroredList[i].mirroredPortType = _this.mirroredPortType;
          }
        }

      }
    },
    // 编辑时 添加被端口镜像
    add () {
      let _this = this;
      _this.mirroredList.push({
        mirroredPortOid: null,
        direction: null,
        type: 'add'
      });
    },
    // 编辑时 删除被端口镜像
    handleDeleteMirror (scope) {
      let { $index } = scope;
      let _this = this;
      let params = {
        session: _this.form.session,
        mirrorPortOid: _this.form.portOid,
        mirrorPortType: _this.form.mirrorPortType, // 'gre/ interface',
        mirror: []
      };
      let list = [];
      for (let i = 0; i < _this.mirroredList.length; i++) {
        list.push({
          direction: _this.mirroredList[i].direction,
          mirroredPortOid: _this.mirroredList[i].mirroredPortOid,
          mirroredPortType: _this.mirroredList[i].mirroredPortType
        });
      }
      list.splice($index, 1);
      params.mirror = list;
      let paras = { updates: [params] };
      this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        _this.$http.post({
          url: '/api/resource/nemng/command/' + _this.ne.id,
          data: {
            commandCode: 'maintenance.portflowmirror.set',
            paras: paras
          }
        }).then(res => {
          if (res) {
            _this.$message.success('删除成功！');
            _this.$parent.refresh();
            _this.mirroredList = list;
          }
        });
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    },
    // 确认
    onSubmit (scope) {
      let _this = this;
      let { row } = scope;
      _this.$refs['portForm'].validate((valid) => {
        if (valid) {
          if (!row.mirroredPortOid) {
            _this.$message.error('请选择被端口镜像');
            return;
          }
          if (!row.direction) {
            _this.$message.error('请选择被端口镜像方向');
            return;
          }
          let params = {
            session: _this.form.session,
            mirrorPortOid: _this.form.portOid,
            mirrorPortType: _this.form.mirrorPortType, // 'gre/ interface',
            mirror: []
          };
          let list = [];
          for (let i = 0; i < _this.mirroredList.length; i++) {
            list.push({
              direction: _this.mirroredList[i].direction,
              mirroredPortOid: _this.mirroredList[i].mirroredPortOid,
              mirroredPortType: _this.mirroredList[i].mirroredPortType
            });
          }
          params.mirror = list;
          let paras = { updates: [params] };
          _this.$http.post({
            url: '/api/resource/nemng/command/' + _this.ne.id,
            data: {
              commandCode: 'maintenance.portflowmirror.set',
              paras: paras
            }
          }).then(res => {
            if (res) {
              _this.$message.success('更新成功！');
              _this.$emit('handleUpdateDialog', false);
              _this.clearData();
              _this.$parent.refresh();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>